<template>
  <div class="mouldPages">
    <div v-if="showFather">
      <serch :formInline="formInline" :options='options' v-on:serchFormInline="serchFormInline" :name='name' :title='title'></serch>
      <div class="checkTable">
        <div class="ct_title">
          塑造列表
        </div>
        <div class="ct_button">
          <el-button @click="GoMouldadd" class="newAdd"  icon="el-icon-plus">新建塑造</el-button>
          <el-button @click="deleteLists" class="delate">批量删除</el-button>
        </div>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
             fixed
            width="55">
          </el-table-column>
          <el-table-column
            prop="mouldName"
            label="任务名称"
            min-width='100'>
          </el-table-column>
          <el-table-column
            prop="programName"
            label="塑造程序"
            min-width='150'>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="塑造时间"
            show-overflow-tooltip
            min-width='100'>
          </el-table-column>
          <el-table-column
            label="塑造结果"
            show-overflow-tooltip
            min-width='80'>
            <template slot-scope="scope">
              <div v-if="scope.row.status == 3">
                成功
              </div>
              <div v-else-if="scope.row.status == 4">
                失败
              </div>
              <div v-else-if="scope.row.status == 1">
                待处理
              </div>
              <div v-else-if="scope.row.status == 2">
                塑造中...
                <i class="el-icon-loading"></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            min-width="120">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 3">
                <el-button 
                  type="text"
                  @click="handleSee(scope.$index, scope.row)">塑造报告</el-button>
                <el-button
                  type="text"
                  @click="download(scope.$index, scope.row)">下载</el-button>
                <el-button
                  type="text"
                  @click="handleEvidence(scope.$index, scope.row)" :loading='scope.row.evidenceLoding'>取证</el-button>
              </div>
              <div v-else-if="scope.row.status == 4">
                <el-button 
                  type="text"
                  @click="handExecMould(scope.$index, scope.row)">重新执行</el-button>
              </div>
              <div v-else-if="scope.row.status == 1">
                <el-button 
                  type="text"
                  @click="handExecMould(scope.$index, scope.row)">执行</el-button>
              </div>
              <div v-else-if="scope.row.status == 2">
                <el-button 
                  type="text"
                  disabled>执行</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

    </div>
    

    <router-view></router-view>
  </div>
</template>

<script>
import serch from '../../components/serch.vue'
import { getMouldList ,deleteMouldByIds ,execMould ,getStatus ,forensicByMouldResult, getProgramAll} from '../../api/index'
export default {
  components:{
    serch
  },
  data(){
    return{
      name:'任务名称',
      title:'塑造程序',
      token:'',
      //
      pageNum:1,
      pageSize:10,
      total:0,
      showFather:true,
      formInline: {
        fileName: '',
        mediaType: ''
      },
      tableData: [],
      options: [],
      currentPage:1,
      multipleSelection:[],
    }
  },
  watch:{
    $route(){
      if(this.$route.path == '/home/mould'){
        this.showFather = true
        this.init()
      }else if(this.$route.path == '/home/mould/mouldadd'|| this.$route.path == '/home/mould/mouldetails'){
        this.showFather = false
      }
    }
  },
  created(){
    if(this.$route.path == '/home/mould'){
      this.showFather = true
    }else if(this.$route.path == '/home/mould/mouldadd' || this.$route.path == '/home/mould/mouldetails'){
      this.showFather = false
    }
    this.token = sessionStorage.getItem('token')
  },
  mounted(){
    this.init()
    this.initOption()
  },
  methods:{
    init(){
      console.log(window.location.origin)
      let pageNum = this.pageNum
      let pageSize = this.pageSize
      let mouldName = this.formInline.fileName
      let programId = this.formInline.mediaType
      let params = { pageNum, pageSize, mouldName, programId}
      getMouldList(params).then(res=>{
        let re = res.data.data
        this.tableData = re.object
        this.total = re.count
        this.tableData.forEach(el=>{
          el.evidenceLoding = false
        })
      })
    },
    initOption(){
      let programName = ""
      let programType = 1
      let status = 1
      let params = { programName, programType, status}
      getProgramAll(params).then(res=>{
        let re = res.data.data
        this.total = re.count
        re.object.forEach((el,index)=>{
          this.options.push({
            value: el.id,
            label: el.programName
          })
        })
      })
    },
    serchFormInline(e){
      this.pageNum = 1
      this.pageSize = 10
      this.formInline.fileName = e.fileName
      this.formInline.mediaType = e.mediaType
      this.init()
    },
    onSubmit() {
      this.$emit('childByValue', this.childValue)
    },
    reset(){
      this.formInline.user= ''
      this.formInline.region= ''
    },
    handleSelectionChange(e){
      this.multipleSelection = e
    },
    GoMouldadd(){
      this.$router.push('/home/mould/mouldadd')
    },
    handleEdit(index,item){
    },
    handleSee(index,item){
      this.$router.push({
        path: '/home/mould/mouldetails',
        query:{
          id: item.id
        }
      })
    },
    download(index,el){
      let token = this.token
      let filename = el.filename
      let alink = document.createElement("a");
        alink.download= 'ceshi'//文件名,大部分浏览器兼容,IE10及以下不兼容
        alink.href= `${window.location.origin}/api/mouldService/v1/downloadMould?filename=${filename}&token=${token}`//创建 url地址
        alink.click(); //自动点击
    },
    handleEvidence(index,el){
      // console.log(this.tableData[index].evidenceLoding)
      // this.tableData[index].evidenceLoding = true
      // console.log(this.tableData[index].evidenceLoding)
      el.evidenceLoding = true
      this.tableData.splice(0,0)
      let id = el.id
      let params ={id}
      forensicByMouldResult(params).then(res=>{
        console.log(res)
        this.tableData[index].evidenceLoding = false
        this.tableData.splice(0,0)
        if(res.data.status == 0){
          this.$message({
            type: 'success',
            message: '取证记录生成成功'
          });
          this.$router.push('/home/evidence')
        }else{
          this.$message.error(res.data.message)
        }
      })
    },
    deleteLists(){
      let ids = []
      this.multipleSelection.forEach((res)=>{
        ids.push(res.id)
      })
      let params = { ids }
      if(this.multipleSelection.length == 0){
        this.$message.error('请先选选择需要删除的数据！');
      }else{
        this.$confirm('此操作将永久删除选中数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteMouldByIds(params).then(res=>{
            if(res.data.message == "success"){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.$refs.multipleTable.clearSelection();
              this.pageNum = 1
              this.pageSize = 10
              this.init()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });    
          this.$refs.multipleTable.clearSelection();
          this.multipleSelection = []      
        });
      }
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageNum = 1
      this.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNum = val
      this.init()
    },
    //执行
    handExecMould(index,el){
      let id = el.id
      let programId = el.programId
      let params = { id,programId }
      execMould(params).then(res=>{
        if(res.data.message == "success"){
          this.init()
          // 获取状态
          getStatus(params).then(re=>{
            if(re.data.message == "success"){
              this.init()
            }else{
              this.$message.error(re.data.message)
            }
          })
        }else{
          this.$message.error(res.data.message)
          this.init()
        }
      })
    },

    // 
    fileDownload (data,fileName) {
        if (!data) {
          return
        }
        let alink = document.createElement("a");
        alink.download=fileName//文件名,大部分浏览器兼容,IE10及以下不兼容
        alink.href=data;//创建 url地址
        alink.click(); //自动点击
      }
  },

}
</script>

<style lang='less' scoped>
.mouldPages{
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  background-color: #1D1F2C;
  height: calc(100vh - 108px);
  overflow: auto;
  .checkTable{
    background-color: #282C41;
    color: #fff;
    padding: 5px 15px;
    margin-top: 20px;
    border-left: 4px solid #04D4FF;
    background-image: url('../../assets/images/mouId/liang.png');
    background-repeat: no-repeat;
    background-size: contain ;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ct_title{
      font-size: 20px;
    }
    .ct_button{
      .newAdd{
        color: #63E9FF;
        border: 1px solid #00CEF0;
        background-color: rgba(49, 203, 236, 0.1400);
        border-radius: 2px;
      }
      .delate{
        background-color: transparent;
        border: 1px solid #fff;
        color: #fff;
        border-radius: 2px;
      }
    }
    
  }
  .tableBox{
    padding: 0 10px;
    background-color: #282C41;
    /deep/.el-table .el-table__cell {
      padding: 8px 0;
    }
    /deep/.el-table th.el-table__cell {
        background: #4F5367!important;
        color: #fff!important;
    }
    /deep/.el-table tr {
        background-color: #3C4052;
        color: #fff;
    }
    /deep/.el-table th.el-table__cell>.cell {
      border-right: 1px solid #fff;
      padding-left: 14px!important;
    }
    /deep/.el-table th.el-table__cell:last-child >.cell {
      border-right: 0;
    }
    /deep/.el-table th.el-table__cell:first-child >.cell {
      border-right: 0;
    }
    /deep/.el-table_body tr.hover_row>td.el-table_cell{
      background-color: red!important;
    }
    /deep/.el-button--text {
      color: #3FC1FF;
    }
    /deep/.el-table__body-wrapper {
      background-color: #3C4052;
    }
  }
   tbody tr:hover>td,/deep/ tbody tr.hover-row>td { background-color: rgba(63,193,255,0.2000) }
  .block{
    padding: 20px 0;
    background-color: #282C41;
    /deep/.el-pagination{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 15px;
    }
    /deep/.el-pagination__total {
      color: #fff;
    }
    /deep/.el-input__inner {
      color: #fff;
      background-color: transparent;
    }
    /deep/.el-pagination.is-background .el-pager li {
      margin: 0 5px;
      background-color: transparent;
      color: #fff;
      min-width: 30px;
      border-radius: 2px;
      border: 1px solid #fff;
    }
    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: rgba(5, 190, 223, 0.14);
      color: #00BEDF;
      border: 1px solid #00BEDF;
    }
    /deep/.btn-prev {
       background-color: transparent;
      color: #FFF;
      border: 1px solid #fff;
    }
    /deep/.btn-next{
      background-color: transparent;
      color: #FFF;
      border: 1px solid #fff;
    }
    /deep/.el-pagination__jump {
      margin-left: 24px;
      font-weight: 400;
      color: #fff;
    }
    
  }
}
</style>

